<template>
    <admin-view>
        <admin-section>
            <admin-card>
                <el-row>
                    <el-col :span="16">
                        <div class="table">
                            <h4>版本信息</h4>

                            <div class="editable">
                                <el-form
                                        label-position="right"
                                        label-width="94px"
                                        size="medium"
                                        :model="data"
                                        :rules="rules"
                                        ref="editor"
                                >
                                    <el-form-item
                                            label="版本号"
                                            prop="version"
                                    >
                                        <el-input v-model="data.version">

                                        </el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="APK"
                                            prop="apk">
                                        <el-input v-model="data.apk"></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="包大小"
                                            prop="size"
                                    >
                                        <el-input v-model.number="data.size" type="number"></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="MD5"
                                            prop="apk">
                                        <el-input v-model="data.md5"></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="强制更新"
                                            prop="auto_update">
                                        <el-switch v-model="data.auto_update"></el-switch>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="onSubmit" type="primary" :loading="loading">保存</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">

                    </el-col>
                </el-row>
            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {Vue,Component} from 'vue-property-decorator'
    import {AdminView,AdminCard,AdminLabel,AdminSection} from '@/views/layout'
    import {Api} from "@/api/meta";

    @Component({
        name:"AdminAddVersion",
        components: {
            AdminView,
            AdminCard,
            AdminSection,

        }
    })
    export default class AdminAddVersion extends Vue {


        data:Api.Meta.AddVersionRequest = {
            version:"",
            apk:"",
            size:0,
            md5:"",
            auto_update:false,
            message:""
        };

        loading:boolean = false;
        rules = {
            version:[{required:true,message:"请输入版本号"}],
            apk:[{required:true,message:"请输入APK路径"}],
            size:[{required:true,message:"请输入整数的包大小",type:"integer"}],
            md5:[{required:true,message:"请填写APK的MD5"}],
        };

        onSubmit() {
            let editor:any = this.$refs['editor'];


            editor.validate((valid:boolean) => {

                if (valid) {

                    Api.Meta.AddVersion(this.data)
                        .then((ack) => {
                            this.$message({
                                type:"success",
                                message:`提交成功.`
                            });

                            this.$router.push({
                                path:`/config`
                            })
                        })
                }
            })
        }
    }
</script>

<style lang="scss" scoped>

    .bg {
        width: 320px;
        height: 185px;

        background-repeat:no-repeat;
        background-size:100% 100%;
        -moz-background-size:100% 100%;

        display: flex;
        flex-direction: column-reverse;

        cursor: pointer;

        .avatar {
            padding: 10px;
            z-index: 1;
            img {
                position: relative;
                display: inline-block;
                width: 40px;
                height: 40px;
                /*圆形显示*/
                border-radius: 50%;
                /*圆形显示*/
                background: rgba(255, 255, 255, 0.1);
                vertical-align: center;
                border: 2px solid gray;
            }
        }

    }
</style>